@import "compass/reset";
@import "compass/css3";
@import "base";
@import "standard_row.scss";


$main-color: #191919;
$white-color: #fff;
$dark-color: #343f46;
$green-color: #52b5bb;

$font-nexa-regular : "nexa_slab_regularregular", Helvetica, Arial, sans-serif !default;
$font-nexa-heavy : "nexa_slab_heavyregular", Helvetica, Arial, sans-serif !default;
$font-nexa-light : "nexa_slablight", Helvetica, Arial, sans-serif !default;
$font-nexa_slabxbold : "nexa_slabxbold", Helvetica, Arial, sans-serif !default;
$font-nexa_black : "nexa_slab_blackregular", Helvetica, Arial, sans-serif !default;
$font-nexa_book : "nexa_slab_bookregular", Helvetica, Arial, sans-serif !default;

@mixin marginPaddingReset(){
    margin:0px;
    padding:0px;
}

@mixin padding_left(){
    padding-left:25px;
}

@mixin padding_left_big(){
    padding-left:85px;
}

html {
  height: 100%;
} 


#sez-lezione.fruizione {
    
    @include marginPaddingReset();    
    background:$dark-color; 
    font-family: "nexa_slab_regularregular", sans-serif;
    color:$main-color;
    font-size:12px;
/*    height: 100%;*/
    
    .content_wrapper {
        @include marginPaddingReset(); 
        height:100%;
    }

    .lesson_wrapper{
        height:100%;
        position: relative;
    }
    
    .goback_outer {
        background:#000;

        .goback {
            height:40px;
            line-height:40px;
            a {
                opacity: 0.8;
                color:$white-color;
                text-transform:uppercase;
            }
            img {
                margin-right:10px;
            }
        }
    } /*end goback_outer*/

    .lesson_content {
        @include marginPaddingReset();
        height:100%;

        .myLessonGradient{
        /*
            // needs latest Compass, add '@import "compass"' to your scss
            @include filter-gradient(#90969b, #343f46, horizontal); // IE6-8 fallback on horizontal gradient
            // IE9 SVG, needs conditional override of 'filter' to 'none'
            $experimental-support-for-svg: true;
            @include background-image(radial-gradient(center, ellipse cover,rgba(144,150,155,1) 0%,rgba(52,63,70,0.5) 50%,rgba(52,63,70,0) 100%));
            background-position:top left;
        */
        }

        .sez-left {
            background: url("/libs/css/assets/lesson_gradient.png") no-repeat top left $dark-color;
            background-size: 100%;
            height : 100%;
            z-index : 1000;
            position : relative ;
            
            .padding_left_big {
                @include padding_left_big();
            }
            
            .padding_left {
                @include padding_left();
            }
            .gear {
             //   background-image : url("/libs/css/assets/lesson_gear_icon.png");
                background-repeat: no-repeat;
                width :95px;
                height : 95px; 
                /*
                position : absolute;
                top : 0px;
                left : 0px;
                */
            }
            .info_current_lesson {height:100%;}
            .description {
                color:$white-color;
                position: relative;
                .title {padding-top:10px;}
                p {
                    line-height:18px;
                    width:80%;
                    min-height:40px;
                }
                .introduction {padding-top: 10px;}
                .num {font-size: 3.0em; font-weight: bold;}    
                .info {font-size: 2.5em;}
                .less_num {color:$green-color; font-size:1.1em;}
                .less_name {color:$white-color;text-transform:uppercase;font-size:1.1em;}
                a.completato {
                    background-image: url("/libs/css/assets/lesson_completato_icon.png");
                    background-position: 0 -126px;
                    display: none;
                    height: 45px;
                    position: absolute;
                    right: -37px;
                    top: 55px;
                    width: 57px;
                    z-index: 1000;
                    &:hover {
                        background-position: 0 60px; 
                        height: 60px;
                        top: 40px;
                       .message {display:block; position: absolute; top:10px; left:-110px; color: $white-color; text-transform:uppercase;}
                    }
                    .message {display:none;}
                    
                }
                a.nonCompletato {
                    background-image: url("/libs/css/assets/lesson_completato_icon.png");
                    background-position: 0 0;
                    display: block;
                    height: 45px;
                    position: absolute;
                    right: -37px;
                    top: 55px;
                    width: 57px;
                    z-index: 1000;
                    &:hover {
                        background-position: 0 -55px; 
                        height: 60px;
                        top: 40px;
                       .message {display:block; position: absolute; top:10px; left:-110px; color: $white-color; text-transform:uppercase;}
                    }
                    .message {display:none;}
                }
            }

            .player {
              /*  width:104%;
                height:100%;
                */
                width: 600px;
                height: 320px;
                border:3px solid $white-color;
                background:#000;
            }
            
            .shadow {
                background-image: url("/libs/css/assets/lesson_shadow.png");
                background-repeat: no-repeat;
                background-size:100%;
                background-position: center;
            }
            
            .less_navig {
                padding-top:20px;
                clear: both;
                overflow: hidden;
                display: block;
                .left {display: none;}
                .right {display: none;}
            }
            a {
                color: $white-color;
                .next {text-align: right;}
                .arrow {
                    background-image: url("/libs/css/assets/lesson_arrow_icons.png");
                    display:block;
                 }
                .left_ico {background-position: 0 0; width:15px;height:11px;}
                .right_ico {background-position: 0 10px; width:15px;height:11px;clear: right;}
            }

        }/* end sez-left */
        
        .sez-right {
            background: url("/libs/css/assets/bkg_noise.png") repeat scroll 0 0 #f4f3f3;
            height:100%;
            
            .tabs_section {
                padding:0;
                margin-left:20px;
                li {width:32%; height:30%;line-height:8em; border:none; border-radius:0px; text-align: center; padding-top:0px;}
                a {width:100%; height:100%; color:#5c6265;}
                
                #tabs_lesson.ui-tabs {padding-top:0px;} 
                .tabs_content {
                    padding-top:2.4em;
                    h3 {color:$green-color; margin-bottom: 0px;}
                    hr {background:#afafaf ; color: #afafaf; height: 1px; border: none;}
                    .lista_materiali {
                        width:100%;
                        li {
                            text-align:left;
                            padding:0.5em 0em;
                            margin-bottom:0;
                            width:100%;
                            .description {
                                width:94%;
                                line-height:16px;
                                .title {text-transform:uppercase;font-weight: bold;color:$main-color;}
                                .subtitle {}
                                .link {color:$green-color; font-style:italic;padding-bottom:0.5em;display:block;}
                            }
                            .icon {width:auto;}
                            .application {
                               /* background-image: url("../../libs/css/assets/corso_lesson_icons.png");
                                background-position:25px 0;
                                */
                                background-image: url("/libs/css/assets/to_delete.png");
                                height: 28px;
                                text-indent: -9999px;
                                width: 26px;
                            }
                            .application-pdf {
                                background-image: url("/libs/css/assets/corso_lesson_icons.png");
                                background-position: -28px 0;
                                height: 28px;
                                text-indent: -9999px;
                                width: 26px;
                            }
                            .video-mp4 {
                                background-image: url("/libs/css/assets/corso_lesson_icons.png");
                                background-position: 0 0;
                                height: 28px;
                                text-indent: -9999px;
                                width: 26px;
                            }
                        }
                    }/*end lista_materiali*/
                    
                    
                    .separator {margin-top:4.5em;}
                    
                    
                    .box_domande {
                         li {
                            text-align:left;
                            padding:0.5em 0em;
                            margin-bottom:0;
                            width:100%;
                            line-height:1.0em;
                        }
                        p {
                            line-height:1.1em;
                            margin-bottom:0px;
                        }
                        #domanda_form_tab{
                            position:relative;
                            padding:10px;
                            background:$green-color;
                        }
                        #domanda_invia_tab{
                            color:$white-color;
                            position: absolute;
                            right: 6px;
                            text-align: left;
                            text-transform: uppercase;
                            top: 6px;
                            width: 18%;
                        }
                        input {
                            margin-bottom:0px;
                            font-style:italic;
                            font-size:10px;
                            color:#929292;
                            width:80%;
                        }
                        .title {
                            font-weight:bold;
                            text-transform:uppercase;
                            padding-bottom:8px;
                        }
                        .answer {
                            padding:10px 0px;
                            margin-bottom:20px;
                            .title {
                                color:$green-color;
                            }
                        }
                        .question {
                            padding: 10px 0px;

                            span {
                                font-weight:bold;
                                text-transform:uppercase;
                            }
                            .date {
                                font-weight:normal;
                            }
                        }
                        .domanda_inviata {
                            color: $green-color;
                            font-style: italic;
                            text-align: center;
                            line-height: 1.5em;
                        }

                    }/*end box_domande*/
                    
                    .my_notes {
                        
                        #formAggiungiNota  {
                            .write_section {
                                position: relative;
                            }
                            textarea#testoNota {
                                height:71px;
                                width:86%;
                                resize:none;
                                background:#fff;
                                border:none;
                                box-shadow:none;
                                font-style:italic;
                                    &:focus {
                                        background:#fff;
                                        border:none;
                                        box-shadow:none;
                                    }
                            }
                            #submitNota {
                                background-image: url("/libs/css/assets/lesson_note_icon.png");
                                background-repeat: no-repeat;
                                height: 71px;
                                text-indent: -9999px;
                                width: 72px;
                                border: none;
                                position: absolute;
                                top: 0px;
                                right: 0px;
                                cursor: pointer;
                            }
                        }/*end formAggiungiNota*/
                        
                        .lista_note {
                            p {line-height: 1.1em;}
                            li {text-align:left; padding:0; margin-bottom:0;width:100%; line-height:1.0em; clear:both;border-bottom: 1px solid #dadbdb; display:block;overflow:hidden;}
                            .time {padding:0.5em 0 0;}
                            a.delete {background: url("/libs/css/assets/lesson_trash_icon.png")no-repeat;height:14px;width:14px;border:none;margin-bottom:0.5em; float:right; display:block;}
                            .clock {padding:10px; padding-bottom:0; color:$green-color;width:20%; text-align:center;}
                            .text {padding:10px;padding-bottom:0; padding-left:10px; width:80%;border-left:1px solid #dadbdb;}
                        }
                        
                        .dwn_appunti {
                            text-transform: uppercase ;
                            color:$main-color;
                            width:auto;
                            font-weight:bold;
                        }
                    }/*end my_notes*/
                    
                }/* end tabs_content */
                
                .ui-tabs-nav {padding-top:0px;}
                .ui-state-default {background: url("/libs/css/assets/bkg_noise.png") repeat scroll 0 0 #eeeded; text-transform: uppercase; }
                .ui-tabs-active {background: none; font-weight: bold; text-shadow: 1px 1px 1px white; color: $main-color;}
                .ui-widget-content {background: none; border: none;}
                .ui-widget-header {background: transparent; border: 0;}
            }
            
        }/* end sez-right */
        
        
    }/* end lesson_content */
    
    .fruizione_passaggio {
        color: $white-color;
        font-size: 1.4em;
        font-family: $font-nexa_slabxbold;
        display: block;
        height: 100%;
        position: relative;
        
        .container_passaggio {
            display: block;
            left: 50%;
            margin-left: -50%;
            margin-top: 15%;
            position: absolute;
            width: 990px;
        }
        .left_passaggio {
            text-align: right;
            width: 305px;
            margin-top: 26%;
            padding-right: 2em;
            font-size:0.9em;
        }
        .center_passaggio {
            position: relative;
            height: 350px;
            overflow: hidden;
            position: relative;
            width: 350px;
            .bkg_categoria {
          //    background-image: url("/libs/css/assets/mask_categoria_passaggio.png");
                background : #000000;
                height: 350px;
                left: 0;
                position: absolute;
                top: 0;
                width: 350px;
                z-index: 0;
            }
            .categoriaIcon {
                background-color: rgba(0, 0, 0, 0);
                bottom: 0;
                left: 0%;
                position: absolute;
                z-index: 3;
            }
            #bar_passaggio {
               // background-color: #ef003b;
                bottom: 0;
                height: 0;
                left: 0;
                position: absolute;
                width: 350px;
                z-index: 1;
           }
            .percentage {
                position: absolute;
                font-size: 3.5em;
                margin-left: -15%;
                left:50%;
                bottom: 0;
                z-index: 4;
            }
        }
        .letteratura_perc { background-color: #cc213e; }
        .fumetto_perc { background-color: #b1dd7e; }
        .fotografia_perc { background-color: #fb6737; }
        .musica_perc { background-color: #34959b; }
        .cucina_perc { background-color: #f99026; }
        .tecnologia_perc { background-color: #3aa2cc; }
        .lingue_perc { background-color: #65bb34; }
        .storia_perc { background-color: #1cafba; }
        .filosofia-e-religione_perc { background-color: #c36fad; }
        .economia_perc { background-color: #00cae5; }
        .salute-e-benessere_perc { background-color: #fbbb25; }
        .arte_perc { background-color: #1abc9c; }
        .cinema-e-teatro_perc { background-color: #09cece; }
        .architettura-e-design_perc { background-color: #fd8574; }
        .sport_perc { background-color: #00aee6; }
        
        .letteratura_color { color: #cc213e; }
        .fumetto_color { color: #b1dd7e; }
        .fotografia_color { color: #fb6737; }
        .musica_color { color: #34959b; }
        .cucina_color { color: #f99026; }
        .tecnologia_color { color: #3aa2cc; }
        .lingue_color { color: #65bb34; }
        .storia_color { color: #1cafba; }
        .filosofia-e-religione_color { color: #c36fad; }
        .economia_color { color: #00cae5; }
        .salute-e-benessere_color{ color: #fbbb25; }
        .arte_color { color: #1abc9c; }
        .cinema-e-teatro_color { color: #09cece; }
        .architettura-e-design_color{ color: #fd8574; }
        .sport_color { color: #00aee6; }
        
        .right_passaggio {
            width: 305px;
            margin-top: 25%;
            padding-left: 0.5em;
            font-size: 2.5em;
            .titolo{
                font-size: 0.5em;
                line-height: 1.3em;
                width: 220px;
                a {
                    display: block;
                    color: $white-color;
                    padding-right: 30px;
                    height: 60px;
                    &:hover { 
                        color: $green-color;
                    }
                    &.arrow {
                        background-image: url( "/libs/css/assets/arrow_right_slide.png" ) ;
                        background-position: right -60px;
                        background-repeat: no-repeat;
                        &:hover {
                            background-image: url( "/libs/css/assets/arrow_right_slide.png" ) ;
                            background-position: right -120px;
                            background-repeat: no-repeat;
                        }
                    }
                }
            }
        }
        .less_navig {
            padding-top:8em;
            clear: both;
            overflow: hidden;
            display: block;
            font-size: 0.7em;
        }
        a {
            color: $white-color;
            .next {text-align: right;}
            .arrow {
                background-image: url("/libs/css/assets/lesson_arrow_icons.png");
                display:block;
             }
            .left_ico {background-position: 0 0; width:15px;height:11px;}
            .right_ico {background-position: 0 10px; width:15px;height:11px;clear: right;}
        }
        
    }/* end fruizione_passaggio */
    
    
}/*end sez-lezione*/
